Bootstrap で画像サイズを自動調整する
Bootstrap は、レスポンシブな Web サイトを簡単に構築できる、人気のあるフロントエンドフレームワークです。画像のサイズ調整は、さまざまな画面サイズで適切に表示するために重要な要素です。この記事では、Bootstrap を使用して画像サイズを自動調整する方法について解説します。
img-fluid クラス
Bootstrap 4 以降では、img-fluid クラスを使用することで、画像がコンテナの幅に合わせて自動的にサイズ調整されます。このクラスは、画像に max-width: 100%; と height: auto; のスタイルを適用します。
<img src="sample.jpg" class="img-fluid" alt="サンプル画像">
レスポンシブ画像
異なる画面サイズに対して異なる画像を表示する場合は、img-responsive クラス (Bootstrap 3) または img-fluid クラス (Bootstrap 4 以降) と共に、ブレークポイントを使用して画像ソースを指定できます。
<picture>
<source media="(min-width: 768px)" srcset="large.jpg">
<source media="(min-width: 576px)" srcset="medium.jpg">
<img src="small.jpg" class="img-fluid" alt="サンプル画像">
</picture>
| ブレークポイント | 画面サイズ |
|---|---|
| xs | Extra small: < 576px |
| sm | Small: ≥ 576px |
| md | Medium: ≥ 768px |
| lg | Large: ≥ 992px |
| xl | Extra large: ≥ 1200px |
参考資料
よくある質問
Q1: img-fluid クラスと img-responsive クラスの違いは何ですか？
img-responsive クラスは Bootstrap 3 で導入され、img-fluid クラスは Bootstrap 4 で導入されました。どちらも画像をコンテナに合わせてサイズ調整しますが、img-fluid クラスはより新しいバージョンで推奨されています。
Q2: 特定の高さで画像を表示するにはどうすればよいですか？
特定の高さで画像を表示する場合は、height 属性ではなく、CSS を使用して高さを設定することをお勧めします。 img-fluid クラスと組み合わせて、max-height プロパティを使用できます。
Q3: 画像のアスペクト比を維持するにはどうすればよいですか？
画像のアスペクト比を維持するには、padding-top プロパティを使用して、コンテナの高さに対する比率を指定します。
<div style="position: relative; padding-top: 56.25%;"> <!-- 16:9 のアスペクト比 -->
<img src="sample.jpg" class="img-fluid" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;" alt="サンプル画像">
</div>